import React, { Component } from 'react'

import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile'

// 导入flex导航图片
import Nav1 from '@/assets/images/nav-1.png'
import Nav2 from '@/assets/images/nav-2.png'
import Nav3 from '@/assets/images/nav-3.png'
import Nav4 from '@/assets/images/nav-4.png'

// 导入样式文件
import style from './index.module.scss'

// 导入接口请求方法
import { swiperInfo, homeGroups, newslist } from '@/api/home'

// 导入头部搜索区域组件
// import SearchHeader from 'components/SearchHeader'
import currentCity from '@/utils/currentCity'

// 导航菜单数据
const navs = [
  { id: 1, img: Nav1, title: '整租', path: '/home/list' },
  { id: 2, img: Nav2, title: '合租', path: '/home/list' },
  { id: 3, img: Nav3, title: '地图找房', path: '/map' },
  { id: 4, img: Nav4, title: '去出租', path: '/home/list' },
]

// 获取地理位置
// navigator.geolocation.getCurrentPosition((position) => {
//   console.log('当前的位置信息', position)
// })

export default class Index extends Component {
  state = {
    // 轮播图数据
    swipers: [],
    isShowSwiper: false,
    // 租房小组数据
    groups: [],
    // 资讯数据
    news: [],
    // 城市
    currentCity: '上海',
  }

  // 获取轮播图数据
  async getSwipers() {
    const res = await swiperInfo()
    // console.log(res.data.body)
    this.setState({
      swipers: res.data.body,
      // 解决轮播图路由跳转后的高度显示问题和自动播放问题
      isShowSwiper: true,
    })
  }

  // 获取租房小组数据
  async getHomeGroups() {
    const res = await homeGroups()
    // console.log(res)
    this.setState({
      groups: res.data.body,
    })
  }

  // 获取资讯信息
  async getNewslist() {
    const res = await newslist()
    // console.log(res)
    this.setState({
      news: res.data.body,
    })
  }

  async componentDidMount() {
    this.getSwipers()
    this.getHomeGroups()
    this.getNewslist()
    // 通过IP定位获取当前城市的定位
    const curCity = await currentCity()
    this.setState({
      currentCity: curCity.label,
    })
  }

  // 渲染swiper
  renderSwiper() {
    return this.state.swipers.map((val) => (
      <a
        key={val.id}
        href="http://www.alipay.com"
        style={{
          display: 'inline-block',
          width: '100%',
          height: 212,
        }}
      >
        <img
          src={`http://115.159.87.220:8080${val.imgSrc}`}
          alt=""
          style={{ width: '100%', verticalAlign: 'top' }}
        />
      </a>
    ))
  }

  // 渲染flex导航菜单
  renderNavs() {
    return navs.map((item) => (
      <Flex.Item
        key={item.id}
        onClick={() => this.props.history.push(item.path)}
      >
        <img src={item.img} alt="" />
        <h2>{item.title}</h2>
      </Flex.Item>
    ))
  }

  // 渲染最新资讯
  renderNews() {
    return this.state.news.map((item) => (
      <div className="news-item" key={item.id}>
        <div className="imgwrap">
          <img
            className="img"
            src={`http://115.159.87.220:8080${item.imgSrc}`}
            alt=""
          />
        </div>
        <Flex className="content" direction="column" justify="between">
          <h3 className="title">{item.title}</h3>
          <Flex className="info" justify="between">
            <span>{item.from}</span>
            <span>{item.date}</span>
          </Flex>
        </Flex>
      </div>
    ))
  }

  render() {
    const { groups } = this.state
    const url = 'http://115.159.87.220:8080'
    return (
      <div className={style.index}>
        {/* 轮播图区域 */}
        <div className="swiper">
          {this.state.isShowSwiper ? (
            <Carousel autoplay infinite autoplayInterval={5000}>
              {this.renderSwiper()}
            </Carousel>
          ) : (
            ''
          )}
          {/* 搜索框 */}
          <Flex className="search-box">
            {/* 左侧白色区域 */}
            <Flex className="search">
              {/* 位置 */}
              <div
                className="location"
                onClick={() => this.props.history.push('/citylist')}
              >
                <span className="name">{this.state.currentCity}</span>
                <i className="iconfont icon-arrow" />
              </div>

              {/* 搜索表单 */}
              <div
                className="form"
                onClick={() => this.props.history.push('/search')}
              >
                <i className="iconfont icon-seach" />
                <span className="text">请输入小区或地址</span>
              </div>
            </Flex>
            {/* 右侧地图图标 */}
            <i
              className="iconfont icon-map"
              onClick={() => this.props.history.push('/map')}
            />
          </Flex>
        </div>

        {/* flex导航区域 */}
        <Flex className="nav">{this.renderNavs()}</Flex>

        {/* 租房小组 */}
        <div className="group">
          <h3 className="title">
            租房小组
            <span className="more">更多</span>
          </h3>
          <Grid
            data={groups}
            square={false}
            hasLine={false}
            columnNum="2"
            renderItem={(item) => (
              <Flex className="group-item" justify="around" key={item.id}>
                <img src={url + item.imgSrc} alt="" />
                <div className="desc">
                  <p className="title">{item.title}</p>
                  <span className="info">{item.desc}</span>
                </div>
              </Flex>
            )}
          />
        </div>

        {/* 最新资讯 */}
        <div className="news">
          <h3 className="group-title">最新资讯</h3>
          <WingBlank size="md">{this.renderNews()}</WingBlank>
        </div>
      </div>
    )
  }
}
